讓網(wǎng)站變灰的CSS代碼（支持IE、Firefox和Chrome）

當(dāng)需要將網(wǎng)站變灰色來(lái)表達(dá)平臺(tái)的哀悼時(shí)，如今主流CSS代碼為

主流方法！網(wǎng)站變灰色的CSS代碼

<style>
html{
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

以上代碼除了IE都支持，
也是現(xiàn)在國(guó)內(nèi)主流網(wǎng)站常用的方法，
都對(duì)被嫌棄的IE沒(méi)做特別處理了
因?yàn)榻衲晡④浺呀?jīng)停止對(duì)IE支持更新，力推Edge瀏覽器，
Win平臺(tái)下的瀏覽器至此也與Chrome一致了。
上方代碼輕便易用，
放在需要灰掉的頁(yè)面即可。
建議放在<head>里。

支持IE9及以上

如果確定要兼容IE9及以上，
可以使用下方代碼，
效果如QQ騰訊網(wǎng)這樣，
可以用一個(gè)灰色層模擬一下。

<div style="position:fixed;
z-index:999;
width:100vw; 
height:100vh; 
left:-100vw; 
outline: 101vw solid rgba(100,100,100,.7);"></div>

讓網(wǎng)站變灰的CSS代碼（支持IE、Firefox和Chrome）

本文于2022年11月30日更新

RocPro永久尊享版優(yōu)設(shè)VIP鐵粉

文章 581 人氣 1062.2w

優(yōu)設(shè) 用戶體驗(yàn)師
收藏 10
點(diǎn)贊 24

復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。

繼續(xù)閱讀本文相關(guān)話題

文章目錄